<template>
  <div class="page">
    <tip ref="tip"
         @emitEvent="emitEvent"
         :tipContent="tipContent"></tip>
    <!-- 卡片内容 -->
    <div class="contents light bg-cyan">
      <fui-collapse>
        <fui-collapse-item :index="index"
                           :open="item.isOpen"
                           v-for="(item,index) in contentList"
                           :key="item.Cid"
                           :arrow="false"
                           :animation="item.Animation"
                           @longpress="isShowBtn(index)">
          <view class="fui-item__box">
            <text class="cuIcon-circlefill"
                  style="margin-right:15px"></text>
            <text>{{item.Content}}</text>
            <div class="btn"
                 v-if="item.Btn">
              <button class="cu-btn cuIcon bg-gradual-blue"
                      data-target="DialogModal1"
                      @tap.stop="showModal($event,item,'修改内容')">
                <text class="cuIcon-edit"></text>
              </button>
              <button class="cu-btn cuIcon bg-gradual-red"
                      style="margin-left: 10px;"
                      @click.stop="tip(item)">
                <text class="cuIcon-delete"></text>
              </button>
            </div>
          </view>
          <template v-slot:content>
            <view class="fui-descr"
                  style="background-color: rgba(96, 208, 203, .1);">
              <input type="text"
                     :value="item.Add" />
            </view>
          </template>
        </fui-collapse-item>
      </fui-collapse>
    </div>

    <!-- 弹窗按钮 -->
    <operate ref="operate">
      <button class="bg-cyan"
              @tap="showModal($event,null,'添加内容')"
              data-target="DialogModal1">添加内容</button>
    </operate>

    <!-- 添加或修改内容弹窗 -->
    <view class="cu-modal"
          :class="modalName=='DialogModal1'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">{{modalTitle}}</view>
          <view class="action"
                @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="padding-xl">
          <view class="fui-page__spacing">
            <fui-input label="内容"
                       inputBorder
                       isFillet
                       placeholder="请输入内容"
                       v-model:value="content"></fui-input>
            <fui-input label="补充"
                       :marginTop="24"
                       isFillet
                       inputBorder
                       isFillet
                       placeholder="请输入补充"
                       v-model:value="add"></fui-input>
          </view>
        </view>
        <view class="cu-bar bg-white justify-end">
          <view class="action">
            <button class="cu-btn line-green text-green"
                    @tap="hideModal">取消</button>
            <button class="cu-btn bg-green margin-left"
                    @tap="editContent(modalTitle=='添加内容'?-1:contentId)">确定</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 提示弹窗 -->
    <fui-dialog :show="tipShow"
                :content="tipContent"
                maskClosable
                @click="tipBtn($event)"
                @close="tip(null)"></fui-dialog>
  </div>
</template>

<script>
import { c_EditContent, c_DelContent } from "@/utils/request.js"
import operate from "@/component/operate.vue"
import tip from "@/component/tip.vue"
import { c_UpdateContent, confirm } from "@/utils/function.js"
export default {
  components: {
    operate,
    tip
  },
  data () {
    return {
      cid: -1,
      contentList: [],
      contentId: -1,
      content: "",
      add: "",
      modalName: null,
      modalTitle: "",
      tipContent: '确定要删除吗',
    }
  },
  methods: {
    isShowBtn: function (index) {
      let that = this
      that.contentList[index].Btn = !that.contentList[index].Btn
      this.$set(this.contentList, index, that.contentList[index])
    },
    editContent: function (id) {
      this.contentId = id
      let userId = uni.getStorageSync('userId')
      let data = JSON.stringify({ "cid": this.contentId, "userId": userId, "parent": this.cid, "content": this.content, "add": this.add })
      c_EditContent(data).then(res => {
        console.log(res);
        this.updateContent()
        if (id >= 0) {
          confirm(1, "修改成功", 4)
        } else {
          confirm(1, "添加成功", 4)
        }
        this.hideModal()
      }).catch(err => {
        console.log(err);
        confirm(0, "添加失败", 2, "./content?cid=" + this.cid)
        this.hideModal()
      })
    },
    getConent: function (id) {
      this.cid = id
      this.contentList = uni.getStorageSync('collectContent-' + this.cid.toString())
      if (this.contentList.length == 0) {
        this.updateContent()
      }
    },
    delContent: function () {
      let data = { "cid": this.contentId }
      c_DelContent(data).then(res => {
        console.log(res);
        this.updateContent()
        confirm(1, "删除成功", 4)
      }).catch(err => {
        console.log(err);
        confirm(0, "删除失败", 4)
      })
    },
    updateContent: function () {
      let data = { "cid": this.cid }
      c_UpdateContent(data)
      setTimeout(() => {
        this.contentList = uni.getStorageSync('collectContent-' + this.cid.toString())
      }, 500);
    },
    setProperty: function () {
      // 设置动画及折叠面板属性，默认第一个展开
      for (let i = 0; i < this.contentList.length; i++) {
        this.contentList[i]["Animation"] = {}
        this.contentList[i]["isOpen"] = false
        this.contentList[i]["Src"] = ""
        this.contentList[i]["Btn"] = false
        if (i == 0) {
          this.contentList[i]["isOpen"] = true
        }
      }
    },
    animateLeft: function (index) {
      let animation = uni.createAnimation({
        duration: 1000,
        timingFunction: 'ease',
        delay: 0
      })

      animation.translateX(100).step()
      this.contentList[index]["Animation"] = animation.export()
    },

    showModal (e, item, title) {
      if (item !== null) {
        this.contentId = item.Cid
        this.content = item.Content
        this.add = item.Add
      }
      this.modalTitle = title
      this.$refs.operate.closePopup()
      this.modalName = e.currentTarget.dataset.target
    },
    hideModal (e) {
      this.content = ""
      this.add = ""
      this.modalName = null
    },
    tip (item) {
      if (item != null) {
        this.contentId = item.Cid
      }
      this.$refs.tip.tip()
    },
    emitEvent: function () {
      this.delContent()
    },
  },
  onLoad (option) {
    this.getConent(option.cid)
    this.setProperty()
  }
}
</script>

<style lang="scss" scoped>
.contents {
  overflow: hidden;
  margin-right: 30rpx;
  margin-left: 30rpx;
  border-radius: 20rpx;
  .fui-item__box {
    width: 100%;
    padding: 26rpx 32rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .btn {
      position: absolute;
      right: 5%;
      display: flex;
      justify-content: space-between;
    }
  }

  .fui-logo {
    width: 48rpx;
    height: 48rpx;
    margin-right: 24rpx;
    display: block;
  }

  .fui-descr {
    width: 100%;
    padding: 32rpx;
    font-size: 28rpx;
    line-height: 52rpx;
    color: #7f7f7f;
    word-break: break-all;
    box-sizing: border-box;
  }
}
</style>